<script setup lang="ts">
// 定义模板属性
interface Template {
  id: string;
  name: string;
  image: string;
  techStack: string[];
  description: string;
}

// 定义属性
const props = defineProps<{
  template: Template
}>()

// 定义事件
const emit = defineEmits(['select'])

// 处理点击
const handleClick = () => {
  emit('select', props.template)
  console.log('模板被选择:', props.template.name)
}
</script>

<template>
  <div class="template-card" @click="handleClick">
    <!-- 模板缩略图 -->
    <div class="template-image">
      <img :src="props.template.image" :alt="props.template.name" />
    </div>
    
    <!-- 模板信息 -->
    <div class="template-info">
      <h3 class="template-name">{{ props.template.name }}</h3>
      
      <!-- 技术栈标签 -->
      <div class="tech-stack">
        <span 
          v-for="(tech, index) in props.template.techStack" 
          :key="index" 
          class="tech-tag"
        >
          {{ tech }}
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.template-card {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.template-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.template-image {
  position: relative;
  padding-bottom: 65%; /* 宽高比 */
  overflow: hidden;
}

.template-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.template-card:hover .template-image img {
  transform: scale(1.05);
}

.template-info {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.template-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.8rem 0;
  color: #333;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

.tech-tag {
  background-color: #f1f3f5;
  color: #666;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}
</style> 